<template>
  <div class="detail-container">
      <el-card shadow="never" style="margin-top: 15px;position: relative">
          <div class="operate-container">
              <i class="el-icon-warning color-danger" style="margin-left: 20px"></i>
              <span class="color-danger">订单状态：{{ orderState | formatOrderState}} </span>
          </div>
          <div style="margin-top: 20px">
              <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
              <span class="font-small">基本信息</span>
          </div>
          <el-card shadow="never" style="margin-top:20px;">
              <el-form  size="mini" label-width="150px" :data="orderInfo" class="minRoW" >
                  <el-row>
                      <el-col :span="8">
                          <el-form-item label="公司名称：">{{ orderInfo.customerName }}</el-form-item>
                      </el-col>
                      <el-col :span="8">
                          <el-form-item label="合同编号：">{{ orderInfo.crmOrderSn }}</el-form-item>
                      </el-col>
                      <el-col :span="8">
                          <el-form-item label="订单号：">{{ orderInfo.orderSn }}</el-form-item>
                      </el-col>
                  </el-row>
                  <el-row>
                      <el-col :span="8">
                          <el-form-item label="合同公司：">{{ orderInfo.sellerStoreName }}</el-form-item>
                      </el-col>
                      <el-col :span="8">
                          <el-form-item label="业务员：">{{ orderInfo.userName }}</el-form-item>
                      </el-col>
                      <el-col :span="8">
                          <el-form-item label="下单时间：">{{ orderInfo.createdAt }}</el-form-item>
                      </el-col>
                  </el-row>
                  <el-row>
                      <el-col :span="8">
                          <el-form-item label="订单数量：">{{ orderInfo.goodsNum }}</el-form-item>
                      </el-col>
                      <el-col :span="8">
                          <el-form-item label="订单金额：">
                              {{orderInfo.orderPrice}}
                          </el-form-item>
                      </el-col>
                      <el-col :span="8">
                          <el-form-item label="支付方式：">
                            {{orderInfo.orderPayType | fiftransactionType}}
                          </el-form-item>
                      </el-col>
                  </el-row>
                  <el-row>
                      <el-col :span="8">
                          <el-form-item label="结算方式：">{{orderInfo.createAbstract}}</el-form-item>
                      </el-col>
                      <el-col :span="8">
                          <el-form-item label="物流方式：">{{orderInfo.orderShippingTypeName}}</el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item label="交货方式：">{{orderInfo.deliveryType}}</el-form-item>
                      </el-col>
                  </el-row>
                  <el-row>
                      <el-col :span="8">
                          <el-form-item label="订单来源：" >{{orderInfo.isOnLineOrder | fifIsOnLineOrder}}</el-form-item>
                      </el-col>
                      <el-col :span="8">
                          <el-form-item label="财务状态：">{{orderInfo.financeState}}</el-form-item>
                      </el-col>
                      <el-col :span="8">
                          <el-form-item label="明确合同约定时间：">{{orderInfo.isTimeSure | fifIsTimeSure}}</el-form-item>
                      </el-col>
                  </el-row>

                  <el-row>
                      <el-col :span="8">
                          <el-form-item label="合同截止付款时间：" >{{orderInfo.expectPayTime}}</el-form-item>
                      </el-col>
                      <el-col :span="8">
                          <el-form-item label="发票是否开明细：" >{{orderInfo.isInvoiceNeedDetail | fifIsTimeSure}}</el-form-item>
                      </el-col>

                      <el-col :span="8">
                          <el-form-item label="是否维护合同：" >{{orderInfo.isDefendOrder | fifIsTimeSure}}</el-form-item>
                      </el-col>
                  </el-row>

                  <el-row>
                    <el-col :span="24" >
                      <el-form-item label="合同其它备注：" >
                        {{orderInfo.order_remark}}
                      </el-form-item>
                    </el-col>
                  </el-row>
              </el-form>
          </el-card>

        <div style="margin-top: 20px">
          <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
          <span class="font-small">收货地址</span>
        </div>
        <el-card shadow="never" style="margin-top:20px;">
          <el-form  size="mini" :data="orderInfo.buyerAddress" label-width="150px" class="minRoW" :rules="rules">
            <el-row>
              <el-col :span="8">
                <el-form-item label="收货人：">{{ orderInfo.buyerAddress.receiverName }}</el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="手机号：">{{ orderInfo.buyerAddress.receiverTel }}</el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="收货地址：">{{ orderInfo.buyerAddress.receiverProvince }}{{ orderInfo.buyerAddress.receiverCity }}{{ orderInfo.buyerAddress.receiverArea }}{{ orderInfo.buyerAddress.receiverAddressInfo }}</el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>

          <div style="margin-top: 20px">
              <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
              <span class="font-small">合同商品</span>
          </div>
          <el-form size="mini" :rules="rules" :model="orderInfo" ref="orderInfo"  >
              <el-table
                      ref="goods"
                      :data="orderInfo.goods"
                      style="width: 100%;margin-top: 20px" border>
                  <el-table-column label="商品信息" width="180" key="1">
                      <template slot-scope="scope">
                        {{ scope.row.goodsName }}
                      </template>
                  </el-table-column>
                  <el-table-column label="成交数量" width="100" align="center" key="2">
                      <template slot-scope="scope">
                        {{ scope.row.goodsNum }}
                      </template>
                  </el-table-column>
                  <el-table-column label="采购底价"  width="100" align="center" key="25" style="color: red;">
                    <template slot-scope="scope">
                      {{ scope.row.purchasePrice }}
                    </template>
                  </el-table-column>
                  <el-table-column label="杂费(装卸费)" width="100"  align="center" key="3">
                      <template slot-scope="scope">
                        {{ scope.row.consultation }}
                      </template>
                  </el-table-column>
                  <el-table-column label="毛利" width="100"  align="center" key="4">
                      <template slot-scope="scope">
                        <el-form-item :prop="`orderGoodsData.${scope.$index}.grossProfit`" :rules="rules.grossProfit" v-if="orderState==0">
                          <el-input v-model="scope.row.grossProfit" ></el-input>
                        </el-form-item>
                        <span else>{{ scope.row.grossProfit }}</span>
                      </template>
                  </el-table-column>
                  <el-table-column label="运联含税运费" width="100" align="center" key="5" style="color: red;">
                      <template slot-scope="scope">
                        {{ scope.row.goodsFreight }}
                      </template>
                  </el-table-column>
                  <el-table-column label="结算方式" width="100" align="center" key="6">
                      <template slot-scope="scope">
                        {{ scope.row.ospPayMethod }}
                      </template>
                  </el-table-column>
                  <el-table-column label="成交单价" width="100" align="center" key="7">
                      <template slot-scope="scope">
                        {{ scope.row | fifGoodsPrice}}
                      </template>
                  </el-table-column>
                  <el-table-column label="合同金额" width="100" align="center" key="8">
                      <template slot-scope="scope">
                        {{ scope.row | fifGoodsAmount }}
                      </template>
                  </el-table-column>
                  <el-table-column label="价格类型" width="100" align="center" key="10">
                      <template slot-scope="scope">
                        {{ scope.row.priceType }}
                      </template>
                  </el-table-column>
                  <el-table-column label="期望发货时间" width="100" align="center" key="11">
                      <template slot-scope="scope">

                      </template>
                  </el-table-column>

                  <el-table-column label="发货紧急度" width="100" align="center"  key="12">
                      <template slot-scope="scope">
                        <el-form-item v-if="orderState==0">
                          <el-select v-model="scope.row.urgentTypeStr">
                            <el-option ></el-option>
                            <el-option></el-option>
                          </el-select>
                        </el-form-item>
                        <span else>{{ scope.row.urgentTypeStr }}</span>
                      </template>
                  </el-table-column>
                  <el-table-column label="发货类型" width="100" align="center"  key="13">
                      <template slot-scope="scope">
                      </template>
                  </el-table-column>
                  <el-table-column label="发货仓库" width="100" align="center" key="14">
                      <template slot-scope="scope">
                        {{ scope.row.warehouseName }}
                      </template>
                  </el-table-column>

                  <el-table-column label="发货时间" width="100" align="center" key="19">
                      <template slot-scope="scope">
                        {{ scope.row.expectSendDate }}
                      </template>
                  </el-table-column>
                  <el-table-column label="备注" width="200" key="20">
                      <template slot-scope="scope">
                          <el-form-item v-if="orderState==0">
                            <el-input v-model="scope.row.remark"></el-input>
                          </el-form-item>
                          <span else>{{ scope.row.remark }}</span>
                      </template>
                  </el-table-column>

                 <el-table-column
                         label="底色"
                         align="center">
                   <template slot-scope="scope">
                    <el-form-item v-if="orderState==0">
                     <el-select v-model="scope.row.goodsColor" size="small" :disabled="scope.row.isNeedInputColor == 0 || orderInfo.kingId > 0">
                       <el-option value="蓝底透明" label="蓝底透明" key="1"></el-option>
                       <el-option value="白底透明" label="白底透明" key="2"></el-option>
                       <el-option value="黑底透明" label="黑底透明" key="3"></el-option>
                       <el-option value="黑色" label="黑色" key="4"></el-option>
                     </el-select>
                    </el-form-item>
                    <span else>{{ scope.row.goodsColor }}</span>
                   </template>
                 </el-table-column>

                <el-table-column label="从我司购买原因" key="24" width="150" fixed="right">
                  <template slot-scope="scope">
                    <el-form-item :prop="`goods.${scope.$index}.fromBuyReasonStr`" :rules="rules.fromBuyReasonStr" v-if="orderState==0">
                      <el-select v-model="scope.row.fromBuyReasonStr" size="small" clearable>
                        <el-option :value="item.cddId" :label="item.cddValue" :key="item.cddId" v-for="item in customerBuyReasonList"></el-option>
                      </el-select>
                    </el-form-item>
                    <span else>{{ scope.row.fromBuyReasonStr }}</span>
                  </template>
                </el-table-column>

                <el-table-column label="客户购买原因" key="23" width="150" fixed="right">
                  <template slot-scope="scope">
                    <el-form-item :prop="`orderGoodsData.${scope.$index}.customerBuyReasonStr`" :rules="rules.customerBuyReasonStr" v-if="orderState==0">
                      <el-select v-model="scope.row.customerBuyReasonStr" size="small" clearable>
                        <el-option :value="item.cddId" :label="item.cddValue" :key="item.cddId" v-for="item in customerBuyReasonStrList"></el-option>
                      </el-select>
                    </el-form-item>
                    <span else>{{ scope.row.customerBuyReasonStr }}</span>
                  </template>
                </el-table-column>
              </el-table>

            <div style="margin-top: 20px">
              <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
              <span class="font-small">特殊需求</span>
            </div>
            <el-card shadow="never" style="margin-top:20px;">

                <el-row :gutter="20" style="overflow: hidden">
                  <el-col :span="8">
                    <el-form-item label="客户行业：" label-width="150px">
                      <el-select  v-model="orderInfo.customerIndustry" v-if="orderState==0" @change="changeCustomerIndustry">
                        <el-option v-for="item in industryList" :value="item.industryValue" :key="item.industryValue" :label="item.industryValue"></el-option>
                      </el-select>
                      <span else>{{ orderInfo.customerIndustry }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="是否工厂直发：" label-width="150px">
                      <el-radio-group v-model="orderInfo.isFactoryDeliver" v-if="orderState==0" @change="changeCustomerIndustry">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="2">否</el-radio>
                      </el-radio-group>
                      <div v-else>{{orderInfo.isFactoryDeliver == 1  ? '是' : orderInfo.isFactoryDeliver == 2 ? '否' : '--'}}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="生产日期：" label-width="150px">
                      <el-select  v-model="orderInfo.productionDate" v-if="orderState==0"
                          :disabled="(orderInfo.customerIndustry == '注塑客户' || orderInfo.customerIndustry == '纺丝客户' || orderInfo.customerIndustry == '挤出客户' || orderInfo.customerIndustry == '挤出型材客户' || orderInfo.customerIndustry == '改性客户') && orderInfo.isFactoryDeliver != ''">
                        <el-option key="一个月以内" label="一个月以内" value="一个月以内"></el-option>
                        <el-option key="三个月以内" label="三个月以内" value="三个月以内"></el-option>
                        <el-option key="半年以内" label="半年以内" value="半年以内"></el-option>
                        <el-option key="一年以内" label="一年以内" value="一年以内"></el-option>
                        <el-option key="一年以上" label="一年以上" value="一年以上"></el-option>
                      </el-select>
                      <div v-else>
                        {{orderInfo.productionDate}}
                      </div>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="8">
                    <el-form-item label="真空率：" label-width="150px">
                      <el-select  v-model="orderInfo.packingRequire" v-if="orderState==0"
                          :disabled="(orderInfo.customerIndustry == '注塑客户' || orderInfo.customerIndustry == '纺丝客户' || orderInfo.customerIndustry == '挤出客户' || orderInfo.customerIndustry == '挤出型材客户' || orderInfo.customerIndustry == '改性客户') && orderInfo.isFactoryDeliver != ''">
                        <el-option key="27%以上" label="27%以上 " value="27%以上"></el-option>
                        <el-option key="36%以上" label="36%以上" value="36%以上"></el-option>
                        <el-option key="60%以上" label="60%以上" value="60%以上"></el-option>
                        <el-option key="72%以上" label="72%以上" value="72%以上"></el-option>
                        <el-option key="80%以上" label="80%以上" value="80%以上"></el-option>
                      </el-select>
              <div v-else>{{orderInfo.packingRequire}}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="破包率：">
                      <el-input v-model="orderInfo.brokenRate" v-if="orderState==0" style="width:214px" aria-placeholder=""
                                :disabled="(orderInfo.customerIndustry == '注塑客户' || orderInfo.customerIndustry == '纺丝客户' || orderInfo.customerIndustry == '挤出客户' || orderInfo.customerIndustry == '挤出型材客户' || orderInfo.customerIndustry == '改性客户') && orderInfo.isFactoryDeliver != ''">
                      </el-input>
                      <div v-else>{{orderInfo.brokenRate}}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="节假日是否收货：" label-width="150px">
                      <el-radio-group v-model="orderInfo.isHolidayCanSend" v-if="orderState==0">
                        <el-radio :label="2">周六周日都不收货</el-radio>
                        <el-radio :label="3">周日不收货</el-radio>
                      </el-radio-group>
                      <div v-else>{{orderInfo.isHolidayCanSend == 2 ? '周六周日都不收货' : orderInfo.isHolidayCanSend == 3 ? '周日不收货' : '--'}}</div>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="8">
                    <el-form-item label="是否为同一批次产品：" label-width="150px">
                      <el-input v-if="orderState==0" placeholder="请输入" style="width:214px" v-model="orderInfo.batchRequire"></el-input>
                      <div v-else>{{orderInfo.batchRequire}}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="备注：" label-width="150px">
                      <el-autocomplete
                      v-if="orderState==0"
                      style="width:100%"
                      class="inline-input"
                      v-model="orderInfo.orderRemark"
                      :fetch-suggestions="querySearch2"
                      placeholder="请输入特殊备注：如批号需求，发货需求等，不显示在合同上"
                      ></el-autocomplete>
                    <div v-else>{{orderInfo.orderRemark}}</div>
                    </el-form-item>
                  </el-col>
                </el-row>

            </el-card>

              <!-- <div style="float:left;width:45%;margin-top:20px">
                  <el-form-item label="操作备注(回退时必填)">
                      <el-input :autosize="{ minRows: 2, maxRows: 6}" type="textarea" style="width:100%" v-model.trim="saleRemark"></el-input>
                  </el-form-item>
              </div> -->
          </el-form>

          <div style="margin-top: 20px;clear: both"  v-if="orderState == 2">
            <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
            <span class="font-small">发货信息</span>
          </div>
          <el-table
            v-if="orderState == 2"
            ref="orderItemTable"
            :data="deliverForm.dgList"
            style="width: 100%;margin-top: 20px" border>
            <el-table-column label="类型"  width="100" align="center">
              <template slot-scope="scope">

              </template>
            </el-table-column>
            <el-table-column label="发货单号" width="160" align="center">
              <template slot-scope="scope">

              </template>
            </el-table-column>
            <el-table-column label="开票状态"  width="100" align="center">
              <template slot-scope="scope">

              </template>
            </el-table-column>
            <el-table-column label="发货时间"   width="100"  align="center">
              <template slot-scope="scope">

              </template>
            </el-table-column>
            <el-table-column label="商品牌号"   width="200" align="center">
              <template slot-scope="scope">

              </template>
            </el-table-column>
            <el-table-column label="发货数量" width="100" align="center">
              <template slot-scope="scope">

              </template>
            </el-table-column>
            <el-table-column label="发货批号" width="150" align="center">
              <template slot-scope="scope">

              </template>
            </el-table-column>
            <el-table-column label="结算方式" width="150" align="center">
              <template slot-scope="scope">

              </template>
            </el-table-column>
            <el-table-column label="合同单价" width="100" align="center">
              <template slot-scope="scope">

              </template>
            </el-table-column>
            <el-table-column label="采购底价" width="150" align="center">
              <template slot-scope="scope">

              </template>
            </el-table-column>
            <el-table-column label="实际含税运费" width="100" align="center">
              <template slot-scope="scope">

              </template>
            </el-table-column>
            <el-table-column label="运费承担" width="100" align="center">
              <template slot-scope="scope">

              </template>
            </el-table-column>
            <el-table-column label="杂费(装卸费)" width="100" align="center">
              <template slot-scope="scope">

              </template>
            </el-table-column>
            <el-table-column label="实际现金毛利" width="100" align="center">
              <template slot-scope="scope">

              </template>
            </el-table-column>
            <el-table-column label="销售发货毛利" width="100" align="center">
              <template slot-scope="scope">

              </template>
            </el-table-column>
            <el-table-column label="销售发货吨毛利" width="120" align="center">
              <template slot-scope="scope">

              </template>
            </el-table-column>
            <el-table-column label="合同分类" width="80" align="center">
              <template slot-scope="scope">

              </template>
            </el-table-column>
            <el-table-column label="状态" width="120" align="center">
              <template slot-scope="scope">

              </template>
            </el-table-column>
            <el-table-column label="司机姓名" width="120" align="center" fixed="right">
              <template slot-scope="scope">

              </template>
            </el-table-column>
            <el-table-column label="司机电话" width="120" align="center" fixed="right">
              <template slot-scope="scope">

              </template>
            </el-table-column>
            <el-table-column label="车牌号" width="120" align="center" fixed="right">
              <template slot-scope="scope">

              </template>
            </el-table-column>
          </el-table>


          <div style="margin-top: 20px;clear: both" v-if="orderState == 2">
            <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
            <span class="font-small">收款信息</span>
          </div>
          <el-table
            v-if="orderState == 2"
            ref="orderItemTable"
            :data="deliverForm.dgList"
            style="width: 100%;margin-top: 20px" border>
            <el-table-column label="收款日期"  width="100" align="center">
              <template slot-scope="scope">

              </template>
            </el-table-column>
            <el-table-column label="收款方式" width="100" align="center">
              <template slot-scope="scope">

              </template>
            </el-table-column>
            <el-table-column label="收款人"  width="100" align="center">
              <template slot-scope="scope">

              </template>
            </el-table-column>
            <el-table-column label="收款金额"   width="100"  align="center">
              <template slot-scope="scope">

              </template>
            </el-table-column>
            <el-table-column label="收款凭证"   width="200" align="center">
              <template slot-scope="scope">

              </template>
            </el-table-column>
            <el-table-column label="收款备注" width="200" align="center">
              <template slot-scope="scope">

              </template>
            </el-table-column>
          </el-table>

      <div style="text-align: center;clear: both;margin-top:20px">
          <el-button type="primary" v-if="orderState == 0 " @click="toDetail" :loading="btnLoading">确认订单</el-button>
          <el-button type="primary" v-if="orderState == 0 " @click="toDetail2" :loading="btnLoading2">取消订单</el-button>
          <el-button type="primary" v-if="orderState == 2 " @click="toDetail3" :loading="btnLoading3">打印合同</el-button>
          <el-button type="primary" v-if="orderState == 1 " @click="toDetail4" :loading="btnLoading4">查看审核</el-button>
          <el-button type="danger"  v-if="orderState == 1 " @click="toDetail5" :loading="btnLoading5">回退</el-button>

      </div>
          <div style="margin-top: 20px;clear: both">
          </div>
          <div style="margin-top:20px;border:1px solid #EBEEF5;padding:20px 20px 0 20px">
              <div >
                  <el-timeline>
                      <el-timeline-item
                              v-for="(activity, index) in orderInfo.logList"
                              :key="index">
                       <span>
                           <span style="padding-right:10px;">{{activity.logTime}}</span>
                           {{activity.logContent}}
                           <span v-show="activity.remark && activity.remark != ''" style="color:red;padding-left:5px">备注：{{activity.remark}}</span>
                           <!--                             <span v-show="logTab == 1" style="padding-left:5px">耗时：{{activity.time_consuming}}</span>-->
                       </span>
                      </el-timeline-item>
                  </el-timeline>
                  <div style="color:#888;padding:20px;text-align: center;font-size:12px" v-if="orderInfo.logList.length == 0">- 暂无数据 -</div>
              </div>
          </div>
      </el-card>


      <el-dialog
                :visible.sync="dialogVisible"
                title="确认订单"
                width="400px">
      <div style="text-align:center;">
        <span >确认提交订单信息无误！</span>
      </div>
      <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="handleConfirm" :loading="btnLoading">确 定</el-button>
                <el-button @click="handleClose">取 消</el-button>
            </span>
      </el-dialog>

      <el-dialog
                :visible.sync="dialogVisible2"
                title="取消订单"
                width="400px">
      <div style="text-align:center; margin-bottom: 30px;">
        <span >确认取消订单！</span>
      </div>
      <div>
      <el-form size="mini" :model="sendForm2" label-width="100px"  ref="sendForm2" :rules="rules2">
        <el-form-item label="未成交原因：" >
          <el-input  v-model="sendForm2.unOrderReason"></el-input>
        </el-form-item>
      </el-form>
    </div>
      <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="handleConfirm2" :loading="btnLoading">确 定</el-button>
                <el-button @click="handleClose2">取 消</el-button>
            </span>
        </el-dialog>

  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import {getOrderInfo,circulationOrder} from '@/api/allInLine/inquiry'
  import {formatDate} from '@/utils/date';
  import store from '@/store'
  import { Message } from 'element-ui';
  export default {
      name: "customerDetail",
      data(){
          // const isvalidateCommission = (rule, value, callback) => {
          //     if (!validateCommission(parseFloat(value))) {
          //         callback(new Error('非负整数或小数'))
          //     } else if(value > 99999999){
          //         callback(new Error('最大值为99999999'))
          //     }else {
          //         callback()
          //     }
          // };
          const defaultSendForm2 = {
            onLineRemark:'',
          }
          return{
              roles:store.getters.roles ? store.getters.roles : [],
              loading:false,
              orderId:this.$route.query.orderId,
              orderState:this.$route.query.orderState,
              orderInfo:{},
              state:1,
              btnLoading:false,
              btnLoading2:false,
              btnLoading3:false,
              btnLoading4:false,
              btnLoading5:false,
              dialogVisible:false,
              dialogVisible2:false,
              dialogVisible3:false,
              dialogVisible4:false,
              dialogVisible5:false,
              rules:{
                  expectSendDate:[{required: true, trigger: 'blur' ,message: '请输入期望发货日期',}],
                  urgentType:[{required: true, trigger: 'change' ,message: '请选择',}],
                  urgentRemark:[{required: true, trigger: 'blur' ,message: '请说明原因',}],
                  goodsFreight:[{required: true, trigger: 'blur' ,message: '请输入摩叔运费',}],
                  isTimeSure:[{required: true, trigger: 'change' ,message: '请选择',}],
                  timeSureDate:[{required: true, trigger: 'blur' ,message: '请输入合同约定时间',}],
                  customerBuyReason:[{required: true, trigger: 'change' ,message: '请选择',}],
                  customerBuyReasonStr:[{required: true, trigger: 'change' ,message: '请选择',}],
                  fromBuyReason:[{required: true, trigger: 'change' ,message: '请选择',}],
                  fromBuyReasonStr:[{required: true, trigger: 'change' ,message: '请选择',}],
                  grossProfit:[{required: true, trigger: 'change' ,message: '请选择',}],
              },
              sendForm2 : JSON.parse(JSON.stringify(defaultSendForm2)),
              rules2:{},
              logTab:'1',
              orderLogs:[],
              remarkForm:{
                  remarkTypeStr:'',
                  remark:'',
              },
              remarkList:[],
              uploadToken:{
                  token:'',
              },
              imgDomain:'',
              fullSrc:'',
              urgentTypeList:[],
              fullscreenLoading:false,
              orderRemarkDisabled:true,
              deliverForm:{
                  dgList:[],
                  remark:''
              },
              fileList:[],
              pickerOptions1: {
                  disabledDate(time) {
                      return time.getTime() < Date.now() - 8.64e7;
                  },
              },
              moresuCouponInfo:[],

              // changeRemarkFrom:JSON.parse(JSON.stringify(defauleChangeRemarkFrom)),

            customerBuyReasonList:[],
            fromBuyReasonList:[],

            remarkForm2:{
              remarkTypeStr:'',
              remark:'',
            },
            fhycList:[],
          }
      },
      computed: {
          ...mapGetters([
              'name',
              'mobile',
              'userId'
          ]),
          dealPrice(){
            return
          },
          changeOrderDetailRemark(){
            if(this.roles.indexOf("changeOrderDetailRemark") != -1){
              return true
            }else{
              return false
            }
          },
          inputOrderCancelReason(){
            if(this.roles.indexOf("inputOrderCancelReason") != -1){
              return true
            }else{
              return false
            }
          },
      },
      created() {
          this.getPageInfo();
      },
      watch:{
          '$route'(to,from){
              this.orderId = this.$route.query.item.orderId;
              this.getPageInfo();
          }
      },
      filters: {
        formatOrderState(data){
            if(data == -1 ) {
              return '取消'
            }else if(data == 0) {
              return '待销售确认'
            }else if(data == 1) {
              return '待销售经理确认'
            }else if(data == 2) {
              return '完成'
           }
         },
          formatTime(time) {
              let date = new Date(time);
              return formatDate(date, 'yyyy-MM-dd')
          },


          filtersTime(time){
              let h = parseInt(time / 3600, 10);
              let n = parseInt((time - h * 3600) / 60, 10);
              let s = time % 60;
              let r = "";
              r = h == 0 ? r : h + "小时";
              r = (n == 0 && s == 0) ? r : r + n + "分";
              r = s ==0 ? r : r + s + "秒";
              return r;
          },
           //  成交单价
           fifGoodsPrice(item){
               item.goodsPrice = parseFloat(item.purchasePrice) + parseFloat(item.consultation) + (parseFloat(item.goodsFreight)/parseFloat(item.goodsNum)) + parseFloat(item.grossProfit)
               return  item.goodsPrice.toFixed(4)
            },

            //  合计金额
           fifGoodsAmount(item){
              item.goodsAmount = parseFloat(item.goodsPrice)*parseFloat(item.goodsNum)
              return  item.goodsAmount.toFixed(2)
            },
          fiFreight(val){
              let sum = 0;
              if(val){
                  val.forEach((el)=>{
                      let goodsFreight = el.goodsFreight ? el.goodsFreight : 0;
                      sum = sum + parseFloat(goodsFreight)
                  });
                  return sum.toFixed(2)
              }else{
                  return 0
              }
          },
          fifterOrderType(val){
              if(val=='normal'){
                  return '正常'
              }else if(val == 'un_sure'){
                  return '待定'
              }
          },
          fifterTimeSure(val){
              if(val == 1){
                  return '是'
              }else if(val == 2){
                  return '否'
              }
          },
          fiffinanceState (val){
              if(val == 0){
                  return '未审核'
              }else if(val == 1){
                  return '已审核 '
              }else if(val == 2){
                  return '已关闭'
              }
          },

        fifFreightType(val){
          if(val == 'sale'){
            return '销售承担运费'
          }else if(val == 'purchase'){
            return '采购承担运费 '
          }
        },
        fiftransactionType(val){
          if(val == 'BANK_PAY'){
            return '银行汇款'
          }else if(val == 'COD_PAY'){
            return '货到付款 '
          }else if(val == 'OFFLINE_PAY'){
            return '线下支付 '
          }else if(val == 'DEPOSIT_PAY'){
            return '定金 '
          }else if(val == 'OTHER_PAY'){
            return '其它 '
          }else if(val == 'PERIOD_PAY'){
            return '账期 '
          }
        },
        fifIsOnLineOrder(val){
          if(val == 1){
            return '销售'
          }else if(val == 0){
            return '推广 '
          }
        },
        fifIsTimeSure(val){
          if(val == 1){
            return '是'
          }else if(val == 0){
            return '否 '
          }else {
            return ''
          }
        },
      },
      methods:{
          goBlack(){
              this.$router.go(-1)
          },
          getPageInfo(){
              this.loading = true;
              getOrderInfo({orderId:this.orderId}).then(res=>{
                  this.orderInfo = res;
              });
          },
           //切换客户行业或是否工厂直发
      changeCustomerIndustry(){
          switch (this.orderInfo.customerIndustry) {
            case '注塑客户':
              this.orderInfo.productionDate = this.orderInfo.isFactoryDeliver == 1 ? '半年以内' : this.orderInfo.isFactoryDeliver == 2 ? '半年以内' : '';
              this.orderInfo.packingRequire = this.orderInfo.isFactoryDeliver == 1 ? '60%以上' : this.orderInfo.isFactoryDeliver == 2 ? '27%以上' : '';
              this.orderInfo.brokenRate = '0';
              break;
            case '纺丝客户':
              this.orderInfo.productionDate = this.orderInfo.isFactoryDeliver == 1 ? '三个月以内' : this.orderInfo.isFactoryDeliver == 2 ? '半年以内' : '';
              this.orderInfo.packingRequire = this.orderInfo.isFactoryDeliver == 1 ? '80%以上' : this.orderInfo.isFactoryDeliver == 2 ? '72%以上' : '';
              this.orderInfo.brokenRate = '0';
              break;
            case '挤出客户':
            case '挤出型材客户':
              this.orderInfo.productionDate = this.orderInfo.isFactoryDeliver == 1 ? '半年以内' : this.orderInfo.isFactoryDeliver == 2 ? '半年以内' : '';
              this.orderInfo.packingRequire = this.orderInfo.isFactoryDeliver == 1 ? '60%以上' : this.orderInfo.isFactoryDeliver == 2 ? '36%以上' : '';
              this.orderInfo.brokenRate = '0';
              break;
            case '改性客户':
              this.orderInfo.productionDate = this.orderInfo.isFactoryDeliver == 1 ? '半年以内' : this.orderInfo.isFactoryDeliver == 2 ? '一年以内' : '';
              this.orderInfo.packingRequire = this.orderInfo.isFactoryDeliver == 1 ? '60%以上' : this.orderInfo.isFactoryDeliver == 2 ? '27%以上' : '';
              this.orderInfo.brokenRate = '0';
              break;
            default:
              this.orderInfo.productionDate = '';
              this.orderInfo.packingRequire = '';
              this.orderInfo.brokenRate = '0';
              break;
          }
      },
          toDetail(){
            this.dialogVisible = true
          },
          handleConfirm(){
            const goods = []
            this.orderInfo.goods.forEach(item=>{
              arr.push({grossProfit:item.grossProfit,ospId:item.ospId,goodsColor:item.goodsColor,remark:item.remark,urgentType:item.urgentType,fromBuyReason:item.fromBuyReason,customerBuyReason:item.customerBuyReason,})
            })
            const data = {state:1,
                          onLineRemark:'',
                          isHolidayCansend:this.orderInfo.isHolidayCansend,
                          customerIndustry:this.orderInfo.customerIndustry,
                          isFactoryDeliver:this.orderInfo.isFactoryDeliver,
                          productionDate:this.orderInfo.productionDate,
                          packingRequire:this.orderInfo.packingRequire,
                          brokenRate:this.orderInfo.brokenRate,
                          batchRequire:this.orderInfo.batchRequire,
                          buyerRemark:this.orderInfo.buyerRemark,
                          goods
                        }
                        circulationOrder(data).then(res=>{
                          Message.success('请求成功')
                        })
            this.dialogVisible = false
          },
          handleClose(){
            this.dialogVisible = false
          },
          toDetail2(){
            this.dialogVisible2 = true
          },
          handleConfirm2(){
            this.dialogVisible2 = false
          },
          handleClose2(){
            this.dialogVisible2 = false
          },
          toDetail3(){
            this.dialogVisible3 = true
          },
          handleConfirm3(){
            this.dialogVisible3 = false
          },
          handleClose3(){
            this.dialogVisible3 = false
          },
          toDetail4(){
            this.dialogVisible4 = true
          },
          handleConfirm4(){
            this.dialogVisible4 = false
          },
          handleClose4(){
            this.dialogVisible4 = false
          },
          toDetail5(){
            this.dialogVisible5 = true
          },
          handleConfirm5(){
            this.dialogVisible5 = false
          },
          handleClose5(){
            this.dialogVisible5 = false
          },
          }
  }
</script>

<style  lang="scss">
  .detail-container {
      width: 90%;
      padding: 20px 20px 20px 20px;
      margin: 20px auto;
      .el-card__header{
          background: #f8f8f8;
          .kehu-name{
              display: inline-block;
              font-size:14px;
              vertical-align: middle;
          }
          .kehu-label{
              font-size:12px;
              vertical-align: middle;
              display: inline-block;
              margin-left:15px;
              color: #409eff;
              background: #ecf5ff;
              border: 1px solid #b3d8ff;
              height:24px;
              line-height: 24px;
              padding:0 10px;
              border-radius: 5px;
          }
          .kehu-info{
              text-align: right;
              font-size: 12px;
              color:#333;
              line-height: 20px;
              span{
                  padding-left:16px;
              }
          }
      }
      .operate-container {
          background: #F2F6FC;
          height: 80px;
          margin: -20px -20px 0;
          line-height: 80px;
      }
  }
  .price-block{
      font-size:12px;
      line-height:30px;
      .lab{
          display: inline-block;
          width:100px;
          text-align: right;
      }
      .text{
          display: inline-block;
      }
  }
  .minRoW .el-form-item{
      margin-bottom:5px;
  }
  .red-form{
      .el-form-item__label{
          color:red
      }
  }
  .tongJitable{
      border-left:1px solid #EBEEF5;
      border-top:1px solid #EBEEF5;
      font-size:12px;
      margin-bottom:20px;
      td{
          border-right:1px solid #EBEEF5;
          border-bottom:1px solid #EBEEF5;
          div.tddiv{
              min-height: 30px;
              line-height: 30px;
              padding:0 5px;
              text-align: center;
              white-space:  nowrap
          }
      }
      .bgtd{
          background: #f5f7fa;
      }
  }

  .title-tab{
      border-radius: 8px;
      background: #eee;
      margin-left: 10px;
      display: inline-block;
      vertical-align: middle;
      line-height: 20px;
      padding: 0 5px;
      color: #666;
  }
  .blurth{
      background:#e21717;
      color:#fff
  }
</style>
